<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="box" v-cloak>
        <div class="nav">
            <div class="logo">
                <img src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDUvYzE4ZDJlMmViMWExOTc4NzNjYTczOGFiNWZmMGRjNzEucG5n.png" alt="">
            </div>
            <div class="navlist">
                <div>产品</div>
                <div>功能</div>
                <div>关于</div>
                <div>团队</div>
                <div>销售</div>
                <div>项目</div>
                <div>价格</div>
                <div>服务</div>
                <div>评价</div>
                <div>联系</div>
            </div>
        </div>
        <div class="banner">
            <el-carousel height="700px">
                <el-carousel-item v-for="(item,$index) in arr" :key="$index">
                    <div class="cs" :style="{backgroundImage:'url('+item.imgurl+')' , backgroundSize:'100% 100%'}">
                        <div>
                            <div>{{item.text}}</div>
                            <div>{{item.content}}</div>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!---->
        <div style="padding-top: 100px;">
            <mybox title="产品介绍" inco="el-icon-discount" text="亲，本版本是最简单的单页式模板，不需要创建内页一般来说，只要半天就可以完成对这个模板的设定哦">
                <div style="padding: 60px 0;">
                    <img style="width: 100%;height: 600px;;" src="https://ccdn.goodq.top/caches/4a7b7daf436f3e5cb2e29433375ccd5d/aHR0cHM6Ly81NTlhNDQ3YzczMmVlLnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTQvMDYvYjU5YzY3YmYxOTZhNDc1ODE5MWU0MmY3NjY3MGNlYmEuanBn.jpg" alt="">
                </div>
            </mybox>
        </div>
        <div style="padding-top: 40px;padding-bottom: 80px;">
            <mybox title="模板功能" inco="el-icon-table-lamp" text="这些文字都是可以根据您的需要自行更改的，所以不要怕和您的需要不一样哦.图片的话都没有具体的大小要求，合适就好，开心就好">
                <div style="padding:0px 80px;overflow: hidden;">
                    <div class="module_list" v-for="i in arr1">
                        <div>
                            <i :class="i.i"></i>
                            <h4>{{i.title}}</h4>
                            <p>{{i.text}}</p>
                        </div>
                    </div>
                </div>
            </mybox>
        </div>
        <!----->
        <div class="bootme">
            <div class="content_me">
                <mybox style="color: #fff;" title="关于我们" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
                    <div style="text-align: center;color: #ff5100;font-size: 18px;">
                        起飞页自主建站平台
                    </div>
                </mybox>
            </div>
        </div>
<!---->
        <div style="padding: 80px 0;">
          <div>
              <mybox title="我们的团队" inco="el-icon-crop" text="介绍一下您的强大的团队吧。几行热情的自我介绍可以迅速的拉近您和访客的距离。">
                  <el-carousel height="480px">
                    <el-carousel-item v-for="(item,$index) in 2" :key="$index" style="padding: 0 50px; box-sizing: border-box;">
                        <div v-for="(i,index) in arr2" class="bin">
                            <div><img :src="i.imgurl" alt=""></div>
                            <div>{{i.name}}</div>
                            <div>{{i.zhi}}</div>
                            <div>{{i.text}}</div>

                        </div>
                    </el-carousel-item>
                  </el-carousel>
              </mybox>
          </div>  
        </div>
        <!------>
        <div class="bootme chanpin">
            <div class="content_me">
                <mybox style="color: #fff;padding: 0 100px;" title="产品销售" inco="el-icon-coin" text="很少人会做第一个吃螃蟹的人，我们不妨避开让人尴尬的数据而展示一些客户愿意看的漂亮数据">
                    <div v-for="i in arr3" class="shu">
                        <span class="spa">{{i.text}}</span>
                        <p>{{i.shu}}</p>
                        <i :class="i.i"></i>
                    </div>
                </mybox>
            </div>
        </div>
        <!---->
        <div style="padding-top:100px;">   
            <mybox title="项目展示" inco="el-icon-discount" text="一个没打过仗的军队很难有说服力，当然打了很多败仗的故事也不会增加任何说服力。所以说说您成功的项目经验吧，如果没有，也可以有哦。">
                <div class="duotu" style="padding: 10px 0 100px;overflow:hidden;position: relative;height: 300px;">
                   <ul>
                       <li v-for="(i,$index) in arr4" @click="index=$index">{{i.text}}</li>
                   </ul>
                   <transition name="no2" v-for="(i,$index) in arr4">
                        <div v-show="$index == index" style="position: absolute;" >
                            <transition v-for="a in 8" name="no1">
                                <div v-show="$index == index">
                                    <p></p>
                                    <img :src="i.tu[a-1].imgurl">
                                </div>
                            </transition>
                            
                        </div>
                   </transition>
                   
                </div>
            </mybox>
        </div>
        <div class="bootme fei">   
            <div class="content_me">
            <mybox style="color: #fff;" title="产品价格" inco="el-icon-discount" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务">
                <div class="fei1" style="padding: 0 150px;box-sizing: border-box;">
                    <div  v-for="i in arr5" style="width: 30%;float: left;background-color: #fff;margin: 1.5%;color: black;">
                        <p style="color: #fff;height: 50px;line-height: 50px;font-size: 20px;font-weight: bold;">{{i.title}}</p>
                        <p style="font-weight: bold;font-size: 30px;line-height: 100px;border-bottom: 1px solid #ccc;">{{i.text}}<span style="font-size: 14px;background-color: #fff;">/月</span> </p>
                        <div style="height: 100px;padding: 50px 0;border-bottom: 1px solid #ccc;line-height: 24px;font-size: 14px;color: #99a9bf;">流量5G/每月<br>
                            空间1G自动<br>
                            备份每日自动备份<br>
                            技术支持邮件/QQ/电话
                        </div>
                        <p style="padding: 10px 0;">
                            <span style="display: inline-block;width: 100px;height: 50px;color: #ffffff;line-height: 50px;">联系客服</span>
                        </p>
                    </div>
                </div>
            </mybox>
        </div>
        </div>
        <div>
            <mybox style="padding:100px 10%;width: 80%; " title="我们的服务" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
             <div style="width: 100%;box-sizing: border-box;overflow: hidden;">
                 <div v-for="i in arr6" style="width: 20%;margin: 1.5%;float: left;">
                     <i :class="i.i" style="font-size: 30px; padding:20px;color: #8e8e8e;"></i>
                     <p>{{i.title}}</p>
                     <p style="padding: 20px 0;color: #8e8e8e;text-align: left;">{{i.text}}</p>
                 </div>
             </div>
            </mybox>
        </div>
        <div>
            <div  style="float: left;width: 50%;">
                <div class="zuihou">
                    <mybox title="联系我们" inco="el-icon-coin">
                        <input type="text" placeholder="姓名">
                        <input type="text" placeholder="邮箱">
                        <textarea name="" id="" cols="30" rows="10" placeholder="留言"></textarea>
                        <span style="width: 200px; height: 50px;line-height: 50px; background-color: #000; color: #fff;display: inline-block;margin: 10px;">发送</span>
                    </mybox>
                </div>
            </div>
            <div class="bootme foot" style="display: inline-block;width: 50%;">
                <div class="content_me zuihou" >
                    <mybox style="color: #fff;padding: 0 100px;" title="关注我们" inco="el-icon-coin" text="起飞页不仅是一个方便快捷的构建网站的自助建站平台，更重要的是，我们为中国用户提供了更多贴心的服务：网站备案、自动备份、快速恢复以及网站代建服务。我们使用了国内和香港最好的网络和云服务器，确保您的网站能够快速完美的呈现在访客面前。">
                        <div class="zuihou1">
                        <i class="el-icon-phone"></i>
                        <i class="el-icon-user"></i>
                        <i class="el-icon-picture"></i>
                        <i class="el-icon-picture"></i>
                        </div>
                    </mybox>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="./vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./index.js"></script>